
import React, { Component } from 'react';


// 函数组件:没有实例
const Fnc = () => {

  // 事件处理函数
  const fn = (ev) => {
    console.log(ev.target)
  }

  return (
    <div>
      <h2>函数组件</h2>
      <p onClick={fn}>点击</p>
    </div>
  )
}


// 类组件：this 有实例
class Index extends Component {


  count = 10;

  // 点击事件的处理程序
  // 箭头函数this确认：书写
  handlerClick = (e) => {
    // console.log(e.target)
    console.log(this.count, e)
  }


  render() {
    return (
      <div>
        <h1>事件绑定</h1>
        <hr />
        {/* dom.onclick = fn */}
        <button onClick={this.handlerClick}>点击</button>
        <hr />
        <a onClick={(e) => {
          e.preventDefault()

        }} href="http://itcast.cn">跳转</a>
        {/* 函数子组件 */}
        <Fnc />
      </div>
    );
  }
}

export default Index;